<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <div class="bacgraond">
        <div class="half">
            <div class="content">
                <div class="er left">
                    <div class="innerear left"></div>
                </div>
                <div class="er right">
                    <div class="innerear right"></div>
                </div>
                <div class="mei left"></div>
                <div class="eye left"></div>
                <div class="mei right"></div>
                <div class="eye right"></div>
                <div class="shou left"></div>
                <div class="bizi"></div>
                <div class="saihong left"></div>
                <div class="saihong right"></div>
                <div class="head"></div>
                <div class="shou right"></div>
            </div>


        </div>
        <div class="half bottom">
            <div class="hengfu">
                <span>新年快乐</span>
            </div>
        </div>
    </div>

    <!-- <img src="./WX20230111-150903.png" alt="" class="test"> -->
</body>

</html>
<script>
    /**
     * @file full.js 设置日期
     * @description 全屏动画js
     * @author xiao li
     * @copyright 黎<https://www.xiaoli.vip>
     * @createDate 2023-01-08 16:20
     */

    const emoteList = ['🐰', '🐇', '🧨', '🎉', '🐇', '🏮', '🐰', '💰', '⛄', '🐇', '❄', '🧧']

    let innerW, innerH

    const setInnerSize = () => {
        innerW = window.innerWidth
        innerH = window.innerHeight
    }


    /**
     * @function JudgePC 判断是当前浏览器信息是否为pc
     * @return { Boolean } 返回是否是pc
     */
    const JudgePC = () => {
        let userAgent
        if (window && window.navigator) {
            userAgent = window.navigator.userAgent;
        } else {
            return true;
        }

        const agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPod', 'iPad'];
        for (let i = 0; i < agents.length; i++) {
            if (userAgent.indexOf(agents[i]) >= 0) return false;
        }
        return true;
    };

    let isPc = JudgePC()

    /**
     * @function 生成随机表情元素
     * @returns {{emoteEl: HTMLDivElement, emoteParams: {left: number, top: number, opacity: number, fs: number, transitionDuration: number}}}
     */
    const createEmoteElement = () => {
        const fsRange = isPc ? [20, 16] : [14, 6]
        const fs = fsRange[0] + Math.round(Math.random() * fsRange[1])
        const left = Math.round(Math.random() * ((innerW - (fs / 2)) - (fs / 2)))
        const top = -fs - 10
        const opacity = ((Math.random() * 16 + 84) / 100).toFixed(2) - 0
        const transitionDuration = 2000 + Math.round(Math.random() * 2000);

        const emoteEl = $('<div></div>').css({
            position: 'absolute',
            color: '#fff',
            top: `${top}px`,
            left: `${left}px`,
            fontSize: `${fs}px`,
            opacity: opacity,
            zIndex: 9999,
            textShadow: `0 0 ${fs / 3}px #ffffffcc`,
            transition: `transform ${transitionDuration}ms linear`
        }).html(emoteList[Math.round(Math.random() * (emoteList.length - 1))])

        return { emoteEl, emoteParams: { fs, left, top, opacity, transitionDuration } }
    }

    const setEmoteAnimate = () => {
        const { emoteEl, emoteParams } = createEmoteElement()
        $('body').append(emoteEl)

        const leftRange = isPc ? [-80, 80] : [-40, 40]
        const endLeft = emoteParams.left + leftRange[Math.round(Math.random())]
        const endTop = innerH - emoteEl.height() + Math.round(Math.random() * 10)
        const moveDuration = innerH * 10 + Math.round(Math.random() * 4000);
        const endScale = 1.2 + ((Math.round(Math.random() * 4) / 10).toFixed(2) - 0);
        const hideDuration = 1200 + Math.round(Math.random() * 2000);

        emoteEl.animate({ left: `${endLeft}px`, top: `${endTop}px`, }, moveDuration, 'linear', () => {
            emoteEl.css({ transform: `scale(${endScale})` })
                .animate({ opacity: 0 }, hideDuration, 'linear', () => (emoteEl.remove()))
        })
    }

    let num = 0
    const start = () => setInterval(() => {
        if (num % 10 === 0) {
            setInnerSize()
            isPc = JudgePC()
        }
        num += 1
        setEmoteAnimate()
    }, isPc ? 320 : 600)

    $(document).ready(() => start())

</script>
<style>
    .test {
        width: 400px;
        height: 400px;
        position: absolute;
        bottom: -100px;

    }

    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .bacgraond {
        background-color: #f7941e;
        width: 100%;
        height: 100vh;

    }

    .half {
        height: 50vh;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;

    }

    .half.bottom {
        /* background-color: antiquewhite; */
        box-shadow: 0 -3px 13px #bc4444;
        z-index: 1;
        position: relative;
    }

    .half .content {
        position: relative;

    }

    .shou {
        width: 35px;
        height: 50px;
        position: absolute;
        bottom: -30px;
        left: -36px;
        background-color: white;
        border-radius: 25px 25px 25px 25px;
        z-index: 3;
    }

    .shou.left {
        transform: rotate(30deg);
    }

    .shou.right {
        left: 150px;
        transform: rotate(-30deg);
    }

    .er {
        height: 130px;
        width: 60px;
        border-radius: 75px 75px 0 0;
        position: absolute;
        bottom: 45px;
        background: white;
        box-shadow: 0 0 2px 0 white;
        border-radius: 53px 53px 65px 65px/53px 53px 254px 254px;
        position: absolute;
    }

    .er.left {
        left: -10px;
        transform: rotate(-30deg);
    }

    .er.right {
        left: 110px;
        transform: rotate(30deg);
    }

    .innerear {
        width: 46px;
        height: 100px;
        background: white;
        box-shadow: 0 0 2px 0 white;
        background: linear-gradient(-196deg, #f8bcd6 9%, white);
        border-radius: 53px 53px 65px 65px/53px 53px 254px 254px;
        transform: rotateZ(0deg);
        position: absolute;
        left: 6px;
        top: 18px;

    }

    .mei {
        height: 5px;
        width: 17px;
        background-color: #b9b9b9;
        position: absolute;
        top: 24px;
        z-index: 2;
        border-radius: 100%;

    }

    .mei::after {
        content: " ";
        display: block;
        width: 19px;
        height: 6px;
        position: relative;
        border-radius: 50%;
        background-color: white;
        left: 0px;
        top: 2px;
    }

    .mei.left {

        left: 30px;
        transform: rotate(336deg);
    }

    .mei.right {

        left: 102px;
        transform: rotate(24deg);
    }

    .eye {
        width: 8px;
        height: 10px;
        border-radius: 98%;
        background-color: black;
        position: absolute;
        top: 47px;
        z-index: 2;
        animation: zha 1s infinite alternate;
    }

    .eye.right {

        left: 40px;
    }

    .eye.left {

        left: 100px;
    }

    .bizi {
        height: 10px;
        width: 10px;
        background-color: #bc4444;
        position: absolute;
        bottom: 4px;
        z-index: 2;
        left: 68px;
        transform: rotate(45deg);
        border-radius: 10px 5px 5px 5px;
    }

    .bizi::after {
        content: " ";
        display: block;
        height: 5px;
        width: 1px;
        background-color: black;
        position: relative;
        top: 8px;
        left: 10px;
        transform: rotate(-45deg);
    }

    .saihong {
        height: 12.5px;
        width: 25px;
        /* background-color: #f8bcd6; */

        background-image: radial-gradient(circle, #ffffff, #f8bcd6);
        position: absolute;
        bottom: 0px;
        z-index: 2;
        border-radius: 12.5px 12.5px 0 0;

    }

    .saihong.left {
        left: 20px;
    }

    .saihong.right {
        left: 100px;
    }

    .head {
        background-color: white;
        position: relative;
        width: 150px;
        height: 75px;
        border-radius: 75px 75px 0 0;
    }

    .hengfu {
        width: 300px;
        height: 100px;
        background-color: #cd2424;
        position: absolute;
        top: 10px;
        text-align: center;
        font-size: 30px;
        color: white;
        border-radius: 10px;
        display: flex;
        justify-content: center;
    }

    .hengfu span {
        align-items: center;
        display: flex;
    }

    @keyframes zha {
        form {
            height: 10px;
            top: 47px;
        }

        to {
            height: 1px;
            top: 52px;
        }
    }
</style>